<template>
  <div class="goal-test-event">
    <h1>{{ message }}</h1>
    <h2>2020.07.01 - 2021.01.01</h2>
    <ul>
        <li v-for="(item, index) in list2020" :key="index">
            <checkbox type="checkbox" :checked="item.checked" :label="item.name" :disabled="item.disabled"></checkbox>
        </li>
    </ul>
    <p class="page-end">The End</p>
  </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Component from 'vue-class-component';

    // @Component({
    //     // 所有的组件选项都可以放在这里
    // })

    interface goalItem {
        checked: boolean,
        name: string,
        disabled: boolean
    }
    export default class goal extends Vue {
        // data 在这
        message: string = '整理及学习目标'


        list2020: Array<goalItem> = [
            {
                checked: true,
                disabled: true,
                name: 'webpack loader/plugin 原理简单自定义插件'
            },
            {
                checked: false,
                disabled: true,
                name: 'http 相关、AST树'
            },
            {
                checked: false,
                disabled: true,
                name: 'node 简单脚本'
            },
            {
                checked: false,
                disabled: true,
                name: 'flutter 大概'
            },
            {
                checked: true,
                disabled: true,
                name: '模块化amd 、cmd 、esmodule '
            },
            {
                checked: true,
                disabled: true,
                name: 'scss 、less 、postscss 原理工作机制 '
            },
            {
                checked: false,
                disabled: true,
                name: '常用算法总结'
            }
        ]
       
    }
</script>
<style lang="scss">
.goal-test-event{
}
</style>